import { Tabs ,Form} from 'antd';
import React, { useRef, useState } from 'react';
import ECharts from 'echarts-for-react';

const initialItems = [
  { label: 'Tab 1', children: 'Content of Tab 1', key: '0' },
  { label: 'Tab 2', children: 'Content of Tab 2', key: '1' },
  {
    label: 'Tab 3',
    children: 'Content of Tab 3',
    key: '2',
    closable: false,
  },
];

const option2 = {
  color: ["red", "green", "yellow"],
  grid: {
    top: 50,
    left: 60,
    right: 50,
    bottom: 30
  },
  title: {
    text: '',
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    // data: [second.data?.series[0].name, second.data?.series[1].name, second.data?.series[2].name],
    textStyle: {
      color: '#ddd',
    },
  },
  toolbox: {
    show: false,
  },
  xAxis: {
  
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    splitLine: {
      show: false,
      lineStyle: {
        type: 'dashed'
      }
    },
    axisLine: {
      lineStyle: {
        type: 'dashed',
        color: '#ddd',//左边线的颜色
      }
    },
  },
  yAxis: {
    type: 'value',
   // min:0,  //取0为最小刻度
    // max: 60, //取100为最大刻度
    axisLabel: {
      formatter: '{value}'
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    },
    axisLine: {
      lineStyle: {
        type: 'dashed',
        color: '#ddd',//左边线的颜色
      }
    },
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: [1, -2, 2, 5, 3, 2, 0],
      markPoint: {
        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
      },
      markLine: {
        data: [
          { type: 'average', name: 'Avg' },
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            },
            {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: 'Max'
              },
              type: 'max',
              name: '最高点'
            }
          ]
        ]
      }
    }
  ]
};

let option = {
  title: {
    text: 'Temperature Change in the Coming Week'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: [1, -2, 2, 5, 3, 2, 0],
      markPoint: {
        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
      },
      markLine: {
        data: [
          { type: 'average', name: 'Avg' },
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            },
            {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: 'Max'
              },
              type: 'max',
              name: '最高点'
            }
          ]
        ]
      }
    }
  ]
};


import AddTabs from './components/addtabs';
let clicknum=0;
const App: React.FC = () => {

  const [activeKey, setActiveKey] = useState(initialItems[0].key);
  const [items, setItems] = useState(initialItems);
  const [tabModalVisible, updateTabModalVisible] = useState<boolean>(false);
  const [activeLabel, setActiveLabel] = useState();
  const [form] = Form.useForm();
  const newTabIndex = useRef(0);

  const onChange = (newActiveKey: string) => {
    setActiveKey(newActiveKey);
  };

  const add = (name:string) => {
  

    if(activeLabel==null){
    
      const newActiveKey = items.length;
      const newPanes = [...items];
      newPanes.push({ label: name, children: 'Content of new Tab', key: newActiveKey });
      setItems(newPanes);
      console.log(newPanes)
      setActiveKey(newActiveKey);
    }else{
      const newPanes = [...items];
      const newItem={...newPanes[activeKey]};
      newItem.label=name;
      console.log(newItem)
     
      newPanes[activeKey]=newItem;
      console.log(name)

      console.log(newPanes)

      setItems(newPanes);
      setActiveLabel(null);
   
    }
  };
  console.log(items)

  const remove = (targetKey: string) => {
    let newActiveKey = activeKey;
    let lastIndex = -1;
    items.forEach((item, i) => {
      if (item.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const newPanes = items.filter(item => item.key !== targetKey);
    if (newPanes.length && newActiveKey === targetKey) {
      if (lastIndex >= 0) {
        newActiveKey = newPanes[lastIndex].key;
      } else {
        newActiveKey = newPanes[0].key;
      }
    }
    setItems(newPanes);
    setActiveKey(newActiveKey);
  };

  const edittabs = (index:number) => {
      clicknum++;
     
      setActiveLabel(items[index].label)
    
      form.resetFields();
      updateTabModalVisible(true);
    
  };


  const onEdit = (targetKey: string, action: 'add' | 'remove') => {
    if (action === 'add') {

      form.resetFields();
      updateTabModalVisible(true);
    //  add();
    } else {
      remove(targetKey);
    }
  };

   return ( <><Tabs
    onChange={onChange}
    type="editable-card"
    onEdit={onEdit}
    onTabClick={(e)=>edittabs(e)} 
  >
    {items.map((item,index) => (
      <Tabs.TabPane tab={item.label} key={index}     closable={item.closable} >
      <ECharts  style={{display:activeKey==index?'block':'none'}}   option={option2} />
    </Tabs.TabPane>
    ))}
   </Tabs>

<AddTabs
onSubmit={async (value) => {
  add( value.label);
  updateTabModalVisible(false);
}}
onCancel={() => {
  // setActiveLabel(null)
  updateTabModalVisible(false);

}}
formRef={form}
tabvalue={activeLabel}
modalVisible={tabModalVisible}


/>
</>
);
   }
export default App;